import styled from 'styled-components'
import cellIcon from '@/static/img/signal.png'
import lanIcon from '@/static/img/lan.png'
import wanIcon from '@/static/img/wan.png'

export const HomeWrapper = styled.section`
  .resource{
      width: 900px;
      margin-bottom: 10px;
      .wrapper{
          width: 400px;
          margin: 0 auto;
          overflow: hidden;
          .cpu-info{
            float: left;
          }
          .mem-info{
            float: right;
          }
          .both-info{
            text-align: center;
            p{
              margin-top: 10px;
              font-size: 16px;
            }
          }
      }
  }
  .interface{
    overflow: hidden;
    width: 900px;
  }
  .basic-info{
    margin-top: 10px;
    width: 900px;
    .title{
      font-weight: bold;
    }
  }
`;

export const InterfaceStatusWrapper = styled.div`

      width: 120px;
      height: 130px;
      float: left;
      text-align: center;
      .interface-icon{
          width: 70px;
          height: 70px;
          margin: 0 auto 6px;
      }
      .cell-icon{
          background: url(${cellIcon});
          background-size: contain;
      }
      .wan-icon{
          background: url(${wanIcon});
          background-size: contain;
      }
      .lan-icon{
          background: url(${lanIcon});
          background-size: contain;
      }
      .status-icon{
           color:${(props)=>props.type?'green':'red'};
           display:block;
           font-size: 20px;
           margin: 4px auto 0;
      }
`
